<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 400px;
            height: 110px;
            background-color: gray;
            border: 1px black solid;
        }

        .box div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px black solid;
        }

        .text {
            position: absolute;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            left: 420px;
            top: 30px;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="green"></div>
    </div>
    <div class="text"></div>
    <div class="time">

    </div>
    <!-- <s><i><h1>aaa</h1></i></s> -->
    <script>
        let id = ''
        // let id2 = ''
        function change(color, time) {
            return new Promise((rs, rj) => {
                document.querySelector(`.${color}`).style.backgroundColor = color
                document.querySelector('.text').innerHTML = time
                let time2 = time
                if (id) clearInterval(id)
                id = setInterval(() => {
                    time2--
                    if (time2 === 0) {
                        clearInterval(id)
                        id = null
                    }
                    document.querySelector('.text').innerHTML = time2
                }, 1000)
                // if (id2) clearTimeout(id2)
                id2 = setTimeout(() => {
                    rs(
                        document.querySelector(`.${color}`).style.backgroundColor = 'gray'
                    )
                }, time * 1000)
            })
        }
        async function fn() {
            const res = await change('red', 10)
            const res1 = await change('green', 5)
            const res2 = await change('yellow', 3)
            fn()
        }
        fn()
         
        function time() {
            let date = Date.now()
            setTimeout(() => {
                const global = new Date('2023-10-1 0:0:0')//目标时间
                const rest = (global - date) / 1000//获取的是毫秒,因此需要转换为秒
                const d = parseInt(rest / 60 / 60 / 24)
                const h = parseInt(rest / 60 / 60 % 24) < 10 ? `0${parseInt(rest / 60 / 60 % 24)}` : parseInt(rest / 60 / 60 % 24)
                const m = parseInt(rest / 60 % 60) < 10 ? `0${parseInt(rest / 60 % 60)}` : parseInt(rest / 60 % 60)
                const s = parseInt(rest % 60) < 10 ? `0${parseInt(rest % 60)}` : parseInt(rest % 60)
                document.querySelector('.time').innerHTML = `距离国庆还有:${d}天-${h}时-${m}分-${s}秒`
                time()
            }, 1000)
        }
        time()
    </script>
</body>

</html>